<template>
  <view
    class="ticket-item pa-16 mb-12 br-8"
    :style="{ borderColor: isSelect && '#2878FF' }"
    @click="handleItemClick"
  >
    <view class="disFlxJS">
      <view class="disFlxAC">
        <text class="fz-16 fw-7 title-color ov-1 flex-1">{{ item?.ticketName }}</text>
        <text
          v-if="item?.ticketStatus === TicketStatusEnum.RUSH_TICKET"
          class="title-color fz-12 px-6 py-2 ml-8 tag-backgroundcolor br-2 flex-shrink-0"
        >
          <text>{{ getBalanceText }}</text>
        </text>
      </view>
      <view
        class="fz-12 px-6 py-2 ml-8 br-2 flex-shrink-0"
        :style="{
          color: statusTextMap?.color,
          backgroundColor: statusTextMap?.backgroundColor,
        }"
      >
        <text>{{ statusTextMap?.text }}</text>
      </view>
    </view>
    <view class="mt-12" v-if="item?.ticketType === TicketTypeEnum.CHARGE">
      <text class="fz-12 fw-7 price-color">{{ DEFAULT_SYMBOL }}</text>
      <text class="fz-18 fw-7 price-color">
        {{ getRealPrice(item, { showSymbol: false }) }}
      </text>
      <text v-if="!isNullOrUnDef(item?.discountPrice)" class="original-price fz-14 ml-8">
        {{ formatMoney({ money: item?.price || 0 }) }}
      </text>
      <text
        v-if="item?.tagName"
        class="fz-14 h-24 px-8 linh-24 ml-8 br-2 discount-label price-color"
      >
        {{ item?.tagName }}
      </text>
    </view>
    <view
      v-if="item?.memberIdentityList && item.memberIdentityList.length"
      class="noPermission-tips px-12 py-8 fz-12 disFlxJS mt-12"
      @click.stop="emits('showNoPermissionPopup')"
    >
      <view class="left">
        <text class="ali-icon fz-16 mr-4">&#xe698;</text>
        <text>无报名权限</text>
      </view>
      <view class="right">
        <text>查看详情</text>
      </view>
    </view>
    <view class="ticket-des" :style="{ gridTemplateRows: isSelect ? '1fr' : '0fr' }">
      <view style="min-height: 0">
        <view class="h-16 mt-12" style="border-top: 1px solid #ebedf0"></view>
        <view class="title-color fz-12 mb-8">
          <text>报名时间：</text>
        </view>
        <view class="gray-color-2 fz-12 mb-8">
          <text>{{ getPurchaseTimeDes(item) }}</text>
        </view>
        <view class="title-color fz-12 mb-8">
          <text>取消报名说明：</text>
        </view>
        <view class="gray-color-2 fz-12 mb-8">
          <text>{{ getRefundTimeDes(item) }}</text>
        </view>
        <view
          v-if="item?.reviewStatus === ReviewStatusEnum.NEED_REVIEW || item?.introduction"
          class="title-color fz-12 mb-8"
        >
          <text>报名说明：</text>
        </view>
        <view class="gray-color-2 fz-12 mb-8">
          <view v-if="item?.reviewStatus === ReviewStatusEnum.NEED_REVIEW" class="mb-4 disFlxAC">
            <text class="ali-icon">&#xec1e;</text>
            <text>此报名类型需要活动举办方审核后才可报名成功。</text>
          </view>
          <view v-if="item?.introduction" class="disFlx">
            <text class="ali-icon">&#xec1e;</text>
            <text>
              {{ item?.introduction }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { IActivityTicketResult } from '@/api/activity/types';
  import {
    ReviewStatusEnum,
    TicketStatusEnum,
    TicketStockLimitEnum,
    TicketTypeEnum,
  } from '@/enums/activityStatusEnum';
  import { formatMoney, DEFAULT_SYMBOL } from '@/utils/number';
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType } from 'vue';
  import { getPurchaseTimeDes, getRefundTimeDes, getRealPrice } from '../../components/activity';
  import { isNullOrUnDef } from '@/utils/is';

  const props = defineProps({
    item: Object as PropType<IActivityTicketResult>,
    isSelect: propTypes.bool.def(false),
  });

  const emits = defineEmits(['click', 'showNoPermissionPopup']);

  function handleItemClick() {
    emits('click', props.item);
  }

  const statusTextMap = computed(() => {
    const status = props.item?.ticketStatus;
    if (status === TicketStatusEnum.END) {
      return {
        text: '已结束',
        color: '#333',
        backgroundColor: '#f2f3f5',
      };
    }

    if (status === TicketStatusEnum.RUSH_TICKET) {
      return {
        text: '报名中',
        color: '#2878FF',
        backgroundColor: '#D0F7FF',
      };
    }

    if (status === TicketStatusEnum.NOT_START) {
      return {
        text: '未开始',
        color: '#333',
        backgroundColor: '#f2f3f5',
      };
    }

    if (status === TicketStatusEnum.ENROLLMENT_FULL) {
      return {
        text: '报名已满',
        color: '#333',
        backgroundColor: '#f2f3f5',
      };
    }
  });

  const getBalanceText = computed(() => {
    return props.item?.stockNum || props.item?.stockLimit === TicketStockLimitEnum.NO_LIMIT
      ? '有名额'
      : '无名额';
  });
</script>

<style lang="scss" scoped>
  .ticket-item {
    background-color: #fff;
    border: 1px solid #ebedf0;
    box-sizing: border-box;
  }

  .ticket-des {
    display: grid;
    grid-template-rows: 0fr;
    transition: all 0.3s;
    overflow: hidden;
  }

  .title-color {
    color: #333;
  }

  .price-color {
    color: #ea5e0e;
  }

  .gray-color-2 {
    color: #646566;
  }

  .tag-backgroundcolor {
    background-color: #f2f3f5;
  }

  .original-price {
    text-decoration-line: line-through;
    color: #969799;
  }

  .discount-label {
    display: inline-block;
    background-image: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
  }

  .noPermission-tips {
    background-color: #fff4e7;
    .left {
      color: #ea5e0e;
    }
    .right {
      color: #969799;
    }
  }
</style>
